import React from 'react';
import { Card, Table, Tag, Space } from 'antd';
import { useUserStore } from '../../store/userStore';
import type { CarbonActivity } from '../../types';

const DataCenter: React.FC = () => {
  const { user, getActivitySummary } = useUserStore();
  const activities = getActivitySummary()?.recentActivity || [];

  const columns = [
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
      render: (date: Date | string) => {
        // 确保date是Date对象
        const dateObj = date instanceof Date ? date : new Date(date);
        // 检查是否是有效日期
        return isNaN(dateObj.getTime()) ? '无效日期' : dateObj.toLocaleString('zh-CN');
      },
    },
    {
      title: '类型',
      dataIndex: 'category',
      key: 'category',
      render: (category: string) => (
        <Tag color={category === '个性化挑战' ? 'green' : 'blue'}>
          {category}
        </Tag>
      ),
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
    },
    {
      title: '碳减排量',
      dataIndex: 'value',
      key: 'value',
      render: (value: number) => `${Math.abs(value).toFixed(2)} kg CO₂`,
    },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Card title="碳足迹数据中心" style={{ marginBottom: '24px' }}>
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <div>
            <h3>活动记录</h3>
            <Table
              columns={columns}
              dataSource={activities}
              rowKey="id"
              pagination={{ pageSize: 10 }}
            />
          </div>
        </Space>
      </Card>
    </div>
  );
};

export default DataCenter; 